<template>
  <div class="wrap">
    <ul class="list1">
      <li v-for="(item, index) in list" :key="index">
        <div class="img">
          <img :src="item.img" />
        </div>
        <p class="title">{{ item.title }}</p>
        <p class="txt">{{ item.txt }}</p>
      </li>
    </ul>
    <div class="btn">
        <p class="p1">更多精彩剧集</p>
        <p class="p2">换一换</p>
    </div>
  </div>
</template>
<script>
import axios from "axios"
export default {
    name:"Box2",
    data(){
        return {
            list:[]
        }
    },
     created(){
        this.a1();
    },
    methods:{
        async a1(){
            let {data} = await axios.get('./1.json');
            this.list = data.b;
        }
    }
}
</script>
<style scoped>
    .wrap{
        width: 100%;
    }
    .list1{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-top: .2rem;
        justify-content: space-around;
    }
    .list1>li{
        width: 33%;
    }
    .list1>li>.img{
        width: 100%;
    }
    .list1>li>.img>img{
        width: 100%;
    }
    .list1>li>.title,.list1>li>.txt{
        padding-left: .2rem;
        padding-top: .1rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .lsit1>li>.title{
        font-size: .28rem;
    }
    .list1>li>.txt{
        padding-bottom: .4rem;
        color: #999;
        font-size: .2rem;
    }
    .btn{
        width: 100%;
        margin-top: .2rem;
        display: flex;
        justify-content: space-around;
    }
    .btn>p{
        width: 3.2rem;
        height: 1rem;
        background: #F5F5F5;
        color: #999;
        line-height: 1rem;
        text-align: center;
    }
</style>